<template>
    <a-modal :title="$t('编辑存储平台')" v-model='isShow' :maskClosable='false' v-dragModal @cancel="handleClose">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-spin :spinning="loading">
                <a-form-model-item :label="$t('名称')" prop="name">
                    <a-input v-model="form.name" :placeholder="$t('Enter') + $t('名称')" />
                </a-form-model-item>
                <a-form-model-item :label="$t('描述')" prop="describe">
                    <a-input v-model="form.describe" :placeholder="$t('Enter') + $t('描述')" />
                </a-form-model-item>
                <a-form-model-item :label="$t('平台')" prop="platform">
                    <a-select :disabled="form.be_association == true" v-model="form.platform" :placeholder="$t('Enter') + $t('平台')">
                        <a-select-option v-for="item of selectList" :value="item.value" :key="item.value">
                            {{ item.label }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item :label="$t('访问URL')" prop="url">
                    <a-input :disabled="form.be_association == true"  v-model="form.url" :placeholder="$t('Enter') + $t('访问URL')" />
                </a-form-model-item>
                <a-form-model-item :label="$t('访问密钥')" prop="access_key">
                    <a-input :disabled="form.be_association == true"  v-model="form.access_key" :placeholder="$t('Enter') + $t('访问密钥')" />
                </a-form-model-item>
                <a-form-model-item :label="$t('安全密钥')" prop="secret_key">
                    <a-input :disabled="form.be_association == true"  v-model="form.secret_key" :placeholder="$t('Enter') + $t('安全密钥')" />
                </a-form-model-item>
                <a-form-model-item :label="$t('目标存储桶')" prop="bucket_name">
                    <a-input :disabled="form.be_association == true"  v-model="form.bucket_name" :placeholder="$t('Enter') + $t('目标存储桶')" />
                </a-form-model-item>
            </a-spin>
        </a-form-model>
        <template slot="footer">
            <a-button :disabled="testDisabled" type='primary' @click="handleTest">{{ $t('有效性测试') }}</a-button>
            <a-button :disabled="safeDisabled" type='primary' @click="handleCreate">{{ $t('保存') }}</a-button>
            <a-button @click="handleClose">{{ $t('Cancel') }}</a-button>
        </template>
    </a-modal>
</template>

<script>
export default {
    data() {
        return {
            isShow: false,
            loading: false,
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
            form: {
                name: '',
                describe: '',
                platform: 1,
                url: '',
                access_key: '',
                secret_key: '',
                bucket_name: '',
                resource: '',
                be_association: false,
            },
            rules: {
                name: [
                    { required: true, message: this.$t('Enter') + this.$t('名称'), trigger: 'blur' },
                    { pattern: /^[A-Za-z0-9_]{1,128}$/, message: this.$t('只允许输入大小写字母和_，长度为1-128个字符'), trigger: 'blur' }
                ],
                describe: [
                    { min: 1, max: 256, message: this.$t('请输入长度为1-256的字符'), trigger: 'blur' },
                ],
                url: [
                    { required: true, message: this.$t('Enter') + this.$t('访问URL'), trigger: 'blur' },
                    { pattern: /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/, message: this.$t('请输入正确的URL地址'), trigger: 'blur' }
                ],
                access_key: [
                    { required: true, message: this.$t('Enter') + this.$t('访问密钥'), trigger: 'blur' },
                    { pattern: /^[A-Za-z0-9]{5,63}$/, message: this.$t('只允许输入英文字母、数字，长度为6-64个字符'), trigger: 'blur' }
                ],
                secret_key: [
                    { required: true, message: this.$t('Enter') + this.$t('安全密钥'), trigger: 'blur' },
                    { pattern: /^[A-Za-z0-9]{5,63}$/, message: this.$t('只允许输入英文字母、数字，长度为6-64个字符'), trigger: 'blur' }
                ],
                bucket_name: [
                    { required: true, message: this.$t('Enter') + this.$t('目标存储桶'), trigger: 'blur' },
                    { pattern: /^[a-z](?!.*?\.\.)[a-z0-9\-./]{2,62}$/, message: this.$t('Not_enter_special_characters5'), trigger: 'blur' }
                ],
            },
            selectList: [
                { label: '通用 S3 存储平台', value: 1 },
            ],
            testDisabled: false,
            safeDisabled: true,
            nameCheck: false,
        };
    },
    watch: {
        'form.name': {
            handler(value) {
                this.$nextTick(() => {
                    this.$refs.ruleForm.validateField(['name'], valid => {
                        if (valid === '') {
                            this.nameCheck = true
                            this.testDisabled = false
                        } else {
                            this.testDisabled = true                        
                        }
                    })
                })
            }
        },
    },
    methods: {
        async handleTest() {
            this.loading = true
            const { data } = await this.$api.data.validStoreApi(this.form)
            this.model(data.id) //返回模板
            this.notice(data.id, data.params, data.flag) //通知列表显示
            if (data.flag == '0') this.safeDisabled = false
            this.loading = false
        },
        handleCreate() {
            this.$refs.ruleForm.validate(async valid => {
                if (valid) {
                    this.loading = true
                    const { data } = await this.$api.data.modifyStoreApi(this.form)
                    this.model(data.id) //返回模板
                    this.notice(data.id, data.params, data.flag) //通知列表显示
                    if (data.flag == '0') {
                        this.$emit('get-list')
                        this.handleClose()
                    }
                    this.loading = false
                } else {
                    return false;
                }
            });
        },
        handleClose() {
            this.$refs['ruleForm'].resetFields();
            this.isShow = false
        },
    }
}
</script>
